<template>
	<view class="main" v-if="isDisplay&&Object.keys(notic).length>0" :style="{ top, left, right, position: position }">
		<!-- 顶部通知栏 -->
		<uni-notice-bar showIcon @getmore="getMore" showGetMore moreText="更多" :text="notic.title" single></uni-notice-bar>

		<!-- 弹窗内容 -->
		<uni-popup ref="popup" type="top" border-radius="10px 10px 0 0">
			<view class="notice-container">
				<!-- 头部区域 -->
				<view class="notice-header">
					<text class="notice-title">系统通知</text>
				</view>

				<!-- 内容区域（NVue 用 scroll-view 实现滚动） -->
				<scroll-view class="notice-content" scroll-y="true" show-scrollbar="false">
					<text class="notice-text">{{ notic.content }}</text>
				</scroll-view>

				<!-- 底部操作区 -->
				<view class="notice-footer" v-if="notic.hasAction">
					<view class="notice-btn" @click="handleConfirm" hover-class="btn-hover"><text class="notice-btn-txt">确认</text></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	name: 'noticBar',
	props: {
		top: { type: String, default: '0rpx' },
		left: { type: String, default: '0rpx' },
		right: { type: String, default: '0rpx' },
		position: { type: String, default: 'fixed' }
	},
	data() {
		return {
			isDisplay: false,
			timer: null,
			notic: {}
		};
	},
	mounted() {
		uni.$on('notice', (res) => {
			this.notic = res;
			if (this.notic.time > 0) {
				this.isDisplay = true;
				// 自动隐藏定时器
				this.timer = setTimeout(() => {
					this.isDisplay = false;
				}, this.notic.time);
			} else {
				this.isDisplay = true;
			}
		});
	},
	destroyed() {
		uni.$off('notice')
		// 清理定时器
		if (this.timer) {
			clearTimeout(this.timer);
			this.timer = null;
		}
	},
	methods: {
		// 点击"更多"打开弹窗
		getMore() {
			this.notic.content = '此为公共信息区域，请文明发言注意隐私！\n此为公共信息区域，请文明发言注意隐私！\n此为公共信息区域，请文明发言注意隐私！';
			this.$refs.popup.open();
			// 打开弹窗时清除自动隐藏定时器
			if (this.timer) {
				clearTimeout(this.timer);
			}
		},
		// 确认按钮回调
		handleConfirm() {
			this.$refs.popup.close();
			this.$emit('confirm');
			this.isDisplay = false;
		}
	}
};
</script>

<style scoped>
/* 基础容器样式 */
.main {
	padding: 0 20rpx;
	z-index: 999; /* 确保在最上层显示 */
}

/* 弹窗容器 */
.notice-container {
	width: 750rpx; /* NVue 推荐固定宽度 */
	padding: 200rpx 20rpx 20rpx 20rpx;

	background-color: #ffffff;
	padding-bottom: 20rpx;
}
.notice-btn-txt {
	color: #f5f5f5;
}
/* 头部样式 */
.notice-header {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	border-bottom-width: 1px;
	border-bottom-color: #f5f5f5;
}

.notice-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.close-icon {
	font-size: 36rpx;
	color: #999999;
	width: 40rpx;
	height: 40rpx;
	text-align: center;
}
.close-icon-text {
}

/* 内容区域 */
.notice-content {
	padding: 30rpx;
	height: 400rpx; /* 限制最大高度 */
}

.notice-text {
	font-size: 28rpx;
	color: #666666;
}

/* 底部按钮区 */
.notice-footer {
	padding: 20rpx 30rpx 30rpx;
}

.notice-btn {
	width: 600rpx;
	height: 80rpx;
	justify-content: center;
	align-items: center;
	display: flex;
	line-height: 80rpx;
	background-color: #007aff;
	color: #ffffff;
	font-size: 30rpx;
	border-radius: 10rpx;
	border-width: 0;
}

/* 按钮点击反馈 */
.btn-hover {
	background-color: #0066cc;
}
</style>
